<template>
  <div>
    <el-form :inline="true" :model="formShow">
        <el-form-item label="添加筛选条件">
        <el-switch v-model="formShow.delivery"></el-switch>
      </el-form-item>
    </el-form>
    <el-form :inline="true" v-show="formShow.delivery" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属机构">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="设备分组">
        <el-select v-model="formInline.group" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="formInline.personId" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="formInline.date" type="daterange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      </el-form-item>
      <el-form-item label="健康码">
        <el-select v-model="formInline.code" placeholder="请选择">
          <el-option label="红码" value="0"></el-option>
          <el-option label="绿码" value="1"></el-option>
          <el-option label="黄码" value="2"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="是否开门">
        <el-select v-model="formInline.canopen" placeholder="请选择">
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="开门类型">
        <el-select v-model="formInline.opentype" placeholder="请选择">
          <el-option label="健康码" value="0"></el-option>
          <el-option label="身份证" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
   <el-table :data="msg" style="width: 100%">
      <el-table-column  prop="id" label="设备ID"  width="80"></el-table-column>
      <el-table-column prop="name" width="60" label="姓名"></el-table-column>
      <el-table-column prop="personId" label="身份证号"></el-table-column>
      <el-table-column label="体温" width="60">
         <template slot-scope="scope">
          <span>{{scope.row.temper}}&#8451;</span>
        </template>
      </el-table-column>
      <el-table-column label="头像"  width="60">
        <template slot-scope="scope">
          <img style="width:30px;" :src="scope.row.profile" alt="">
        </template>
      </el-table-column>
      <el-table-column label="码色" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.code==0">绿码</span>
          <span v-else-if="scope.row.code==1">黄码</span>
          <span v-else-if="scope.row.code==2">红码</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="非绿码原因"></el-table-column>
       <el-table-column label="是否开门"  width="80">
        <template slot-scope="scope">
          <span>{{scope.row.canopen?"是":"否"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="opentype" label="开门类型" width="80"></el-table-column>
      <el-table-column prop="equipgrop" label="设备分组"></el-table-column>
      <el-table-column prop="department" label="所属机构"></el-table-column>
      <el-table-column prop="openTime" label="开门时间"></el-table-column>
      <el-table-column prop="details" label="详情">
        <template slot-scope="scope">
           <el-link :href="scope.row.details" type="primary">查看详情</el-link>
          <!-- <a >查看详情</a> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="ps"
        layout="total, sizes, prev, pager, next, jumper"
        :total="msg.length">
      </el-pagination>
  </div>
  </div>
</template>
<script>
import message from "../../assets/information/data.json"
export default {
  name: 'Mall',
  data(){
        return{
          msg:[],
          currentPage:1,
          ps:5,
          formInline: {
            name: '',
            region: '',
            group:"",
            personId:"",
            phone:"",
            code:"",
            canopen:"",
            opentype:"",
            date:"",  
          },
          formShow:{
            delivery:false
          }
        }
      },
       methods:{
         getdata(){
           this.msg=message;
          //  this.filterArr=message;
         },
         onSubmit(){
           console.log(this.formInline);
         },
          handleSizeChange(val) {
            console.log(`当前页: ${this.currentPage}`);
            console.log(`每页 ${val} 条`);
            this.ps=val;
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            console.log(`每页 ${this.ps} 条`);
            this.currentPage=val;
          }
       },
       created(){
         this.getdata();
       },
       computed:{
         filterArr(){
           return 1;
         }
       }
}
</script>